<template>
	<view>
		<scroll-view class="scroll-view-market" scroll-x="true">
			<view class="market-item" v-for="(item, i) in topSymbols" :key="item.symbol"
				@click="navTo(`/pages/public/kline?symbol=${item.symbol}`)">
				<view class="item">
					<view class="t">{{ item.title
            }}<text :class="
                topMakretMap[`market.${item.symbol}.detail`].change
                  | formatChangeCls
              ">{{
                topMakretMap[`market.${item.symbol}.detail`].change
                  | formatChange
              }}</text></view>
					<text class="c" :class="
              topMakretMap[`market.${item.symbol}.detail`].change
                | formatChangeCls
            ">{{
              topMakretMap[`market.${item.symbol}.detail`].tick
                ? topMakretMap[`market.${item.symbol}.detail`].tick.close
                : "0.00"
            }}</text>
					<text class="b">≈ {{ topMakretMap[`market.${item.symbol}.detail`].cny }} CNY</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topSymbols: [{
						symbol: "btcusdt",
						title: "BTC/USDT"
					},
					{
						symbol: "ethusdt",
						title: "ETH/USDT"
					},
					{
						symbol: "eosusdt",
						title: "EOS/USDT"
					},
				],
				topMakretMap: {
					"market.btcusdt.detail": {},
					"market.ethusdt.detail": {},
					"market.eosusdt.detail": {},
				},
			};
		},
		onShow() {
			console.log('onshow')
		},
		onHide() {
			console.log('onhide')

		},
		mounted() {
			console.log('mounted quant')
			// this.$store.dispatch('WEBSOCKET_INIT','ws://api.hadax.com/ws')
			setTimeout(() => {
				this.loadTopMarket();
			}, 500);
		},
		beforeDestroy() {
			console.log('beforeDestroy')

			for (let i = 0; i < 3; i++) {
				let ch = `market.${this.topSymbols[i].symbol}.detail`;
				let data = {
					unsub: ch,
					id: Date.now() + "",
				};
				this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data));
				uni.$off(ch, (res) => {});
			}
			/* setTimeout(() => {
			  this.$store.dispatch('WEBSOCKET_CLOSE')
			}, 500); */

		},
		filters: {
			formatChange(v) {
				return (v > 0 ? "+" : "") + parseFloat(v).toFixed(2) + "%";
			},
			formatChangeCls(v) {
				if (v == 0) {
					return "";
				} else if (v > 0) {
					return "upper-text";
				} else {
					return "lower-text";
				}
			},
			formatMarketcap(v) {
				return formatUnit(v);
			},
		},
		methods: {
			loadTopMarket() {
				console.log("loadTopMarket");
				let $this = this;
				for (let i = 0; i < 3; i++) {
					let ch = `market.${this.topSymbols[i].symbol}.detail`;
					console.log("ch", ch);
					let data = {
						sub: ch,
						id: Date.now() + "",
					};
					this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data));
					uni.$on(ch, (res) => {
						let d = res.data;
						if (d) {
							// console.log('res', res, d.tick)
							//d.tick.close = d.tick.close.toFixed(2);
							d.change = parseFloat(
								((d.tick.close - d.tick.open) / d.tick.open) * 100
							).toFixed(2);
							d.cny = parseFloat(d.tick.close * 7.04).toFixed(2);
							$this.topMakretMap[res.data.ch] = d;
						}
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.scroll-view-market {
		width: 94%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .uni-scroll-view{
      display: flex;
      justify-content: center;
      .market-item {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 33.3%;

        .item {
          box-sizing: border-box;
          //border: 1rpx dashed rgb(0, 26, 255);
          background-color: #151e3d;
          margin: 0;
          padding: 30upx 0 30upx 0;
          width: 90%;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          border-radius: 10rpx;


          .t {
            font-weight: bold;
            font-size: $font-sm;
          }

          .c {
            padding: 10upx 0 10upx 0;
            font-size: $font-xl;
            font-weight: bold;
          }

          .b {
            font-size: $font-sm;
            color: $font-color-disabled;
          }
        }
      }
    }

		.upper-text {
			color: $uni-color-upper
		}

		.lower-text {
			color: $uni-color-lower
		}
	}
</style>
